<template>
  <div>
    <div class="table-head">
      <div style="flex: 1">
        <el-button type="primary" @click="events.add" size="small"
          >新增</el-button
        >
      </div>
      <div style="flex: 1">
        <el-input></el-input>
      </div>
      <div style="flex: 1"></div>
    </div>
    <div class="table-body">
      <el-table v-loading="data.loading" :data="data.data" border>
        <el-table-column
          label="序号"
          width="160"
          type="index"
        ></el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          width="200"
          label="职务名称"
          prop="name"
        ></el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          width="200"
          label="等级"
          prop="dlv"
        ></el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          width="200"
          label="创建时间"
          prop="createTime"
        ></el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          width="200"
          label="使用次数"
          prop="personnel"
        ></el-table-column>
        <el-table-column
          #default="scope"
          :show-overflow-tooltip="true"
          width="150"
          label="是否启用"
          >{{ scope.row.isBan == 0 ? "否" : "是" }}</el-table-column
        >
        <el-table-column
          :show-overflow-tooltip="true"
          width="150"
          label="描述"
          prop="dexplain"
        ></el-table-column>
        <el-table-column label="操作" prop="name" width="200">
          <template #default="scope">
            <el-button
              size="small"
              @click="events.detail(scope.row.id)"
              type="primary"
              >详情</el-button
            >
            <el-popconfirm
              title="确认删除吗？"
              v-if="scope.row.count === 0"
              @confirm="events.del(scope.row.id)"
            >
              <template #reference>
                <el-button size="small" plain type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <router-view></router-view>
    </div>
    <div class="table-foot">
      <el-pagination
        background
        size="small"
        layout="prev, pager, next"
        :total="data.pages?.total"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { Get_Del, Get_Duty } from "@/api/org";
import router from "@/router";
import type { Org_Index_Data } from "@/utils/types";
import { notice } from "@/utils/notice";
import type { Dictionary_Index_Data } from "@/utils/types";
import { reactive, watchEffect } from "vue"
//选项式api  组合式api
const data = reactive<Dictionary_Index_Data>({
  isFirst: true,
  data: [],
  loading: false,
  key: "",
  pages: {
    page: 1,
    limit: 10,
    total: 0,
  },
});

const methods = {
  async bind() {
    data.loading = true;
    const res = await Get_Duty();
    data.loading = false;
    if (res.code === 0) {
      data.data = res.data.data;
      data.pages!.total = res.data.total;
    }
  },
};

const events = {
  /**
   * 添加职务
   */
  add() {
    router.push("/org/add_duty");
  },
  detail(id: string) {
    router.push("/org/duty_detail/" + id);
  },
  async del(id: string) {
    data.loading = true;
    const res = await Get_Del({
      id: id,
    });
    data.loading = false;
    notice(res);
    methods.bind();
  },
};

watchEffect(() => {
  methods.bind();
});
</script>

<style scoped>
.table-head {
  border: 1px solid #eee;
  margin-bottom: 8px;
  padding: 8px;
  display: flex;
  border-radius: 4px;
}

.table-body {
  margin-bottom: 8px;
}
</style>
